  <template>
  <div class="firstTab">
    <!-- <component :is="add_show"></component> -->
    <div class="project-list">
      <div class="search">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item class="nameinput">
            <el-select
              v-model="searchInfo.status"
              placeholder="请选择项目状态"
              @change="searchProjectList"
            >
              <el-option
                v-for="item in optionSelect"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="userType === 1" class="nameinput">
            <el-select
              v-model="searchInfo.label"
              placeholder="请选择项目类型"
              @change="searchProjectList"
            >
              <el-option
                v-for="item in optionSelect1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-else class="nameinput">
            <el-select
              v-model="searchInfo.label"
              placeholder="请选择项目类型"
              @change="searchProjectList"
            >
              <el-option
                v-for="item in optionSelect2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item id="input-list">
            <el-input
              v-model="searchInfo.groupName"
              placeholder="请输入项目组名称"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="searchInfo.name"
              placeholder="请输入项目名称"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item>
            <button @click="searchProjectList">查询</button>
          </el-form-item>
        </el-form>
      </div>
      <button class="import" @click="handleimport">导入</button>

      <div class="table">
        <template>
          <el-table
            v-loading="loading"
            :data="tableData"
            style="width: 98%"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center', padding: '0' }"
            @sort-change="orderChange"
          >
            <el-table-column label="项目名称" width="220" fixed>
              <template slot-scope="scope">
                <div
                  class="col1"
                  v-on:click="
                    toDetail(scope.row.type, scope.row.id, scope.row.label)
                  "
                >
                  <img :src="scope.row.logo" />
                  <div
                    :class="
                      scope.row.label === 1 && userType !== 1
                        ? 'dec1 muban'
                        : 'dec1'
                    "
                  >
                    <!-- <div class="dec1"> -->
                    <p>{{ scope.row.name }}</p>
                    <!-- <template v-if="scope.row.type === 1">
                      <span>瀑布式协作项目</span>
                    </template>
                    <template v-else>
                      <span>软件敏捷开发项目</span>
                    </template> -->
                  </div>
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column label="项目成员" width="330">
              <template slot-scope="scope">
                <div class="col3">
                  <div
                    class="item"
                    v-for="item in scope.row.groupUserName.slice(0, 4)"
                    :key="item.index"
                  >
                    <template
                      v-if="
                        item.roleName.length > 0 && item.roleName.length < 2
                      "
                    >
                      <p
                        v-for="item1 in item.roleName"
                        :key="item1.evaluationroleid"
                      >
                        <template>
                          {{ item1.rolename }}
                        </template>
                      </p>
                    </template>
                    <template v-else-if="item.roleName.length === 0">
                      <p>&nbsp;</p>
                    </template>
                    <template v-else>
                      <p>多个角色</p>
                    </template>
                    <img
                      slot="reference"
                      :src="item.avatar"
                      v-if="item !== null || item.avatar"
                    />

                    <p v-if="item !== null || item.name">{{ item.name }}</p>
                  </div>
                  <div
                    class="mpeople"
                    v-if="
                      scope.row.groupUserName &&
                      scope.row.groupUserName.length > 4
                    "
                  >
                    等{{ scope.row.groupUserName.length }}人
                  </div>
                </div>
              </template>
            </el-table-column> -->
            <!-- <el-table-column label="我的角色">
              <template slot-scope="scope">
                <span v-if="scope.row.role">{{ scope.row.role }}</span>
                <span v-else style="color: #b6b6b6">暂未获得</span>
              </template>
            </el-table-column> -->
            <el-table-column label="专业" prop="evaluationName">
              <!-- <template slot-scope="scope">
                <span v-if="scope.row.role">{{ scope.row.role }}</span>
                <span v-else style="color: #b6b6b6">暂未获得</span>
              </template> -->
            </el-table-column>
            <el-table-column label="班级" prop="departmentName">
              <!-- <template slot-scope="scope">
                <span v-if="scope.row.role">{{ scope.row.role }}</span>
                <span v-else style="color: #b6b6b6">暂未获得</span>
              </template> -->
            </el-table-column>
            <el-table-column label="项目组名称">
              <template slot-scope="scope">
                {{ scope.row.groupName }}
              </template>
            </el-table-column>
            <el-table-column label="项目负责人">
              <template slot-scope="scope" v-if="scope.row.managerList">
                <div class="col2">
                  <div
                    v-for="item in scope.row.managerList.slice(0, 1)"
                    :key="item.index"
                  >
                    <!-- <template v-for="item1 in item.roleName">
                      <p :key="item1.evaluationroleid">{{ item1.rolename }}</p>
                    </template> -->
                    <!-- <p v-if="item.roleName.length > 1">多个角色</p> -->
                    <!-- <template v-if="(item.roleName.length = 1)">
                      <p v-for="(item1, index) in item.roleName" :key="index">
                        <template v-if="item1">
                          {{ item1.rolename }}
                        </template>
                      </p>
                    </template>
                    <template v-else-if="(item.roleName.length = 0)">
                      <p>&nbsp;</p>
                    </template>
                    <img
                      slot="reference"
                      :src="item.avatar"
                      style="border-radius: 50%"
                    /> -->
                    <p>
                      {{ item.name }}
                    </p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="项目等级" sortable="custom" prop="level">
              <template slot-scope="scope">
                <span
                  class="misLV"
                  :class="
                    scope.row.level <= 100
                      ? 'LvOne'
                      : scope.row.level > 100 && scope.row.level <= 200
                      ? 'LvTwo'
                      : 'LvThree'
                  "
                >
                  LV{{ scope.row.level }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="开始时间"
              sortable="custom"
              prop="startDate"
            >
              <template slot-scope="scope">
                {{ scope.row.startDate }}
              </template>
            </el-table-column>
            <el-table-column label="结束时间" sortable="custom" prop="endDate">
              <template slot-scope="scope">
                {{ scope.row.endDate }}
              </template>
            </el-table-column>
            <el-table-column label="进度" width="130">
              <template slot-scope="scope">
                <!-- <div class="domany">
                  <span
                    :class="scope.row.progress <= 15 ? 'many' : 'many1'"
                    :style="{ width: scope.row.progress + '%' }"
                    >{{ scope.row.progress }}</span
                  >
                </div> -->
                <el-progress
                  class="progressBox1"
                  :text-inside="true"
                  :stroke-width="20"
                  :percentage="Number(scope.row.progress)"
                ></el-progress>
              </template>
            </el-table-column>
            <el-table-column label="过期（天）">
              <template slot-scope="scope">
                <span v-if="scope.row.day === '正常'">{{ scope.row.day }}</span>
                <span style="color: #d82d2d" v-else>{{ scope.row.day }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <button class="tabBtn1"></button>
                修改项目当前项目状态
                {{(scope.row.role + '').indexOf('负责')}}
                <el-tooltip
                  content="启动项目"
                  placement="top"
                  v-if="scope.row.status === 1"
                >
                  <button
                    v-if="
                      (scope.row.role + '').indexOf('负责') !== -1 ||
                      (scope.row.role + '').indexOf('创建') !== -1
                    "
                    class="tabBtn3"
                    @click="changeStatus(scope.row.id, scope.row.status)"
                  ></button>
                  <button
                    v-else-if="userType === 1"
                    class="tabBtn3"
                    @click="changeStatus(scope.row.id, scope.row.status)"
                  ></button>
                </el-tooltip>
                删除项目
                <el-tooltip content="删除项目" placement="top">
                  <button
                    class="tabBtn2"
                    @click="deleteProject(scope.row.id)"
                  ></button>
                </el-tooltip>
              </template>
            </el-table-column> -->
          </el-table>
        </template>
      </div>
    </div>
    <div style="text-align: center" class="pagbox">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="paging.total"
        :page-size="paging.ps"
        @current-change="pageChange"
        :current-page="paging.p"
      >
      </el-pagination>
    </div>
    <daoru
      :showimport.sync="showimport"
      :token="token"
      @updateList="getProjectList"
    ></daoru>
  </div>
</template>

<script>
import projectdetail from '../projectDetail.vue';
import agileproject from '../agileproject.vue';
import daoru from './importcomponents/import';
// import axios from 'axios';
import { getprojectlist, modifyStatus, delProject, getprojectList } from '@/api/project/projectlist';
export default {
  name: 'firstTab',
  components: {
    projectdetail,
    agileproject,
    daoru
  },

  data() {
    return {
      token: sessionStorage.getItem('usertoken'),
      showimport: false, // 导入弹层控制
      add_show: '',
      // 当前默认页码
      currentpage: 1,
      // 当前页面数据总数
      totalcount: 0,
      optionSelect: [
        {
          value: null,
          label: '全部'
        },
        {
          value: '1',
          label: '未开始'
        }, {
          value: '2',
          label: '进行中'
        }, {
          value: '3',
          label: '已结束'
        }
      ],
      optionSelect1: [
        {
          value: null,
          label: '全部'
        },
        {
          value: '1',
          label: '模板'
        },
        {
          value: '2',
          label: '自建'
        }, {
          value: '3',
          label: '复制'
        }
      ],
      optionSelect2: [
        {
          value: null,
          label: '全部'
        },
        {
          value: '2',
          label: '自建'
        }, {
          value: '3',
          label: '复制'
        }
      ],
      searchInfo: { // 搜索信息
        groupName: null,
        name: null,
        status: '2',
        label: null
      },
      tableData: [],
      loading: true,
      userType: 0, // 用户身份类型
      paging: { // 分页
        p: 1,
        ps: 10,
        total: 0
      },
      projectSort: {
        level: null,
        startDate: null,
        endDate: null
      }
    };
  },
  mounted() {
  },
  methods: {
    // 获取项目列表 搜索项目 排序
    async getProjectList() {
      const res = await getprojectList({userId: Number(sessionStorage.getItem('userid')), p: this.paging.p, ps: this.paging.ps, groupName: this.searchInfo.groupName, name: this.searchInfo.name, label: this.searchInfo.label, status: this.searchInfo.status, level: this.projectSort.level, endDate: this.projectSort.endDate, startDate: this.projectSort.startDate});
      // console.log(res);
      if (res.code === 200) {
        this.loading = false;
      }
      // console.log(this.paging);
      this.tableData = JSON.parse(JSON.stringify(res.data.records));
      this.paging.total = res.data.total;
    },
    // 搜索项目
    searchProjectList() {
      this.paging.p = 1;
      this.getProjectList();
    },
    // 导入项目
    handleimport() {
      // console.log('点解了', this.showimport);
      this.showimport = true;
      // console.log('点解了1', this.showimport);
    },
    toDetail: function (type, id, label) { // 点击新增，切换first组件
      // console.log('dianjile', type, id, label);
      if (this.userType !== 1 && label === 3) {
        // console.log('无权查看');
        this.$message({
          showClose: true,
          message: '无权查看更多'
        });
      } else {
        if (type === 1) {
          this.$router.push({
            name: 'Prodetail',
            params: {
              projectId: id,
              projectLabel: label,
              index: 0,
              currentView: 'survey'
            }
          });
          localStorage.setItem('projectId', id);
        } else {
          this.$router.push({
            name: 'Agileproject',
            params: {
              projectId: id,
              projectLabel: label,
              index: 0,
              currentView: 'survey'
            }
          });
          localStorage.setItem('projectId', id);
        }
      }
    },
    // 分页
    pageChange(currentpage) {
      // console.log(currentpage);
      // let page = document.getElementsByClassName('active')[2].innerHTML;
      // this.currentpage = currpage;
      this.paging.p = currentpage;
      this.getProjectList();
    },
    // 修改项目状态为启动项目
    changeStatus(data, data1) {
      if (data1 === 2) {
        this.$message({
          showClose: true,
          type: 'info',
          message: '当前项目已启动'
        });
      } else if (data1 === 3) {
        this.$message({
          showClose: true,
          type: 'info',
          message: '当前项目已完成'
        });
      } else {
        this.$confirm('是否启动该项目！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let changeArray = [];
          changeArray.push(data);
          modifyStatus(changeArray).then(res => {
            // this.$router.go(0);
            this.getProjectList();
            this.$message({
              showClose: true,
              type: 'success',
              message: '启动成功!'
            });
          });
        }).catch(() => {
          this.$message({
            showClose: true,
            type: 'info',
            message: '取消启动'
          });
        });
      }
    },
    // 删除项目
    deleteProject(id) {
      this.$confirm('是否删除该项目！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // console.log('dainjile', this.currentpage);
        delProject(id).then(res => {
          // 删除之后重新加载整个列表
          getprojectlist(Number(sessionStorage.getItem('userid')), 1, 6).then(res => {
            // console.log(res.data, this.currentpage);
            this.tableData = res.data.records;
            this.totalcount = res.data.total;
            this.currentpage = 1;
          });
          // this.reload();
        });
        this.$message({
          showClose: true,
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '取消删除'
        });
      });
    },
    // 排序
    async orderChange(val) {
      // ascending 表示升序 descending 表示降序
      // console.log(val);
      this.projectSort = {
        level: null,
        startDate: null,
        endDate: null
      };
      this.paging.p = 1;
      if (val.prop === 'level') {
        // console.log('等级');
        if (val.order === 'ascending') {
          this.projectSort.level = 0;
          // this.getProjectList();
        } else {
          // console.log('降序');
          this.projectSort.level = 1;
          // this.getProjectList();
        }
      } else if (val.prop === 'endDate') {
        // console.log('结束时间');
        if (val.order === 'ascending') {
          // console.log('升序');
          this.projectSort.endDate = 0;
        } else {
          // console.log('降序');
          this.projectSort.endDate = 1;
        }
      } else if (val.prop === 'startDate') {
        // console.log('开始时间');
        if (val.order === 'ascending') {
          // console.log('升序');
          this.projectSort.startDate = 0;
        } else {
          this.projectSort.startDate = 1;
        }
      }
      this.getProjectList();
    }

  },
  created() {
    this.getProjectList();
    this.userType = Number(sessionStorage.getItem('usertype'));
  }

};
</script>

<style lang="less" scoped>
.firstTab {
  width: 100%;
  .project-list {
    width: 100%;
    // height: 705px;
    margin-bottom: 20px;
    position: relative;

    .search {
      min-width: 937px;
      height: 30px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      .box1 {
        width: 200px;
        height: 33px;
        background: #ffffff;
        border-radius: 3px;
        border: 1px solid #f1f4ff;
        display: flex;
        .lf {
          flex: 1;
          font-size: 14px;
          font-weight: 400;
          color: #555555;
          line-height: 33px;
          text-align: center;
        }
        .rh {
          width: 33px;
          height: 33px;
          border-left: 1px solid #f1f4ff;
          background: url("~@/assets/triangle.png") no-repeat center center;
          background-size: 10px 18px;
        }
      }
      button {
        font-size: 16px;
        font-weight: 500;
        color: #ffffff;
        line-height: 32px;
        width: 85px;
        height: 33px;
        background: #2fc0e0;
        border-radius: 4px;
        box-shadow: 0 0 5px #2fc0e0;
      }
    }
    .import {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
      line-height: 32px;
      width: 85px;
      height: 33px;
      background: #2fc0e0;
      border-radius: 4px;
      box-shadow: 0 0 5px #2fc0e0;
    }
    .table {
      width: 100%;
      height: auto;
      background: #ffffff;
      box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
      border-radius: 10px;
      /deep/.el-table {
        margin: 0 auto;
      }
      /deep/.el-table td,
      .el-table th {
        text-align: center;
      }
      /deep/ .el-table th {
        height: 42px;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        color: #222222;
        line-height: 14px;
      }
    }
  }
  button {
    display: inline-block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
  }
  .tabBtn1 {
    background: url("~@/assets/tabBtn1.png") no-repeat center center;

    background-size: 100% 100%;
  }
  .tabBtn2 {
    background: url("~@/assets/delete.png") no-repeat center center;

    background-size: 100% 100%;
  }
  .tabBtn3 {
    background: url("~@/assets/startProject.png") no-repeat center center;

    background-size: 100% 100%;
  }

  .domany {
    border: 1px solid #6c59cc;
    width: 100%;
    height: 24px;
    border-radius: 12px;
    margin: 0 10px;
    padding: 4px;
    text-align: left;
    .many {
      display: inline-block;
      height: 100%;
      background-image: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
      border-radius: 12px;
      text-align: center;
      vertical-align: top;
      color: #000000;
      line-height: 16px;
      font-size: 12px;
    }
    .many1 {
      display: inline-block;
      height: 100%;
      background-image: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
      border-radius: 12px;
      text-align: center;
      vertical-align: top;
      color: white;
      line-height: 16px;
      font-size: 12px;
    }
  }
  .col1 {
    width: 98%;
    height: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    img {
      width: 45px;
      height: 45px;
      margin: 4px 0;
      border-radius: 0px;
    }
    .dec1 {
      flex: 1;
      margin-left: 8px;
      color: #2fc0e0;
      p,
      span {
        color: #2fc0e0;
      }
    }
    .dec1.muban {
      p,
      span {
        color: #555;
      }
    }
    p {
      // width: 140px;
      margin: 0;
      font-size: 12px;
      font-weight: 400;
      color: #222222;
      line-height: 20px;
      text-align: left;
    }
    p:hover {
      color: #2fc0e0;
      text-decoration: underline #2fc0e0;
    }
    .dec1.muban:hover {
      p,
      span {
        color: #555;
        text-decoration: none;
      }
    }
    span {
      display: block;
      font-size: 12px;
      font-weight: 400;
      color: #555555;
      line-height: 17px;
      margin-top: 4px;
      text-align: left;
    }
  }
  // 第二列样式
  .col2 {
    // width: 100%;
    // height: 80px;
    // display: flex;
    // flex-direction: column;
    // justify-content: space-between;
    // align-items: center;
    p {
      // margin: 0;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #222222;
      line-height: 14px;
      text-align: center;
    }
    // img {
    //   display: block;
    //   width: 45px;
    //   height: 45px;
    //   border-radius: 50%;
    //   box-shadow: 1px 1px 3px #d7d7d7;
    // }
  }

  // 第三列样式
  // .col3 {
  //   width: 90%;
  //   margin: 0 auto;
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  //   .item {
  //     img {
  //       text-align: center;
  //       width: 45px;
  //       height: 45px;
  //       border-radius: 50%;
  //     }
  //     p {
  //       color: #555;
  //       margin: 0;
  //       font-size: 14px;
  //       font-family: PingFangSC-Regular, PingFang SC;
  //       font-weight: 400;
  //       color: #111111;
  //       text-align: center;
  //     }
  //   }
  //   .mpeople {
  //     width: 55px;
  //     height: 55px;
  //     border-radius: 50%;
  //     background: #e8f8fb;
  //     box-shadow: 1px 1px 2px 0px rgba(215, 215, 215, 0.5);
  //     border: 3px solid #ffffff;
  //     color: #2fc0e0;
  //     text-align: center;
  //     line-height: 55px;
  //   }
  // }
  .col3 {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;

    .item {
      width: auto;
      height: 80%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-left: 4px;
      img {
        text-align: center;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        box-shadow: 1px 1px 3px #d7d7d7;
      }
      p {
        margin: 0;
        width: 100%;
        font-size: 12px;
        font-weight: 400;
        color: #222222;
        line-height: 12px;
        text-align: center;
      }
    }

    .mpeople {
      width: 45px;
      height: 45px;
      background: #e8f8fb;
      box-shadow: 1px 1px 2px 0px #d7d7d7;
      border: 3px solid #ffffff;
      border-radius: 50%;
      font-size: 12px;
      font-weight: 400;
      color: #2fc0e0;
      line-height: 40px;
      align-self: center;
      margin-left: 2px;
    }
  }
  // display: flex;
  // justify-content: center;
  // align-items: center;

  // .el-progress {
  //   width: 96%;
  //   margin-left: 1.5%;
  //   // margin: 0 auto;
  //   // margin-top: 3px;
  //   // /deep/.el-progress-bar {
  //   //   padding-right: 0;
  //   // }
  //   /deep/.el-progress-bar__inner {
  //     background: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
  //   }
  //   /deep/.el-progress-bar__outer {
  //     background: none;
  //   }
  //   /deep/.el-progress-bar__innerText {
  //     font-size: 12px;
  //     font-family: DINAlternate-Bold !important;
  //     color: #ffffff;
  //     margin-bottom: 3px;
  //   }
  // }
  .misLV {
    display: inline-block;
    height: 21px;
    width: 60px;
    font-size: 12px;
    font-family: SukhumvitSet-Bold;
    // background-color: #e8f8ec;
    text-align: center;
    line-height: 21px;
    display: inline-block;
    border-radius: 12px;
    // margin-left: 15px;
    // color: #fff;
  }
  .LvOne {
    // background: #c5f5d1;
    color: blue;
  }
  .LvTwo {
    // background: #f7cbd2;
    color: red;
  }
  .LvThree {
    // background: #cbd5f5;
    color: green;
  }

  .el-pagination {
    margin: 0 auto;
    /deep/.btn-prev {
      width: 32px;
      height: 32px;
      background-color: transparent;
    }
    /deep/.btn-next {
      width: 32px;
      height: 32px;
      background-color: transparent;
    }
  }
  /deep/.el-icon-arrow-left:before {
    font-size: 20px;
    color: #555555;
  }
  /deep/.el-icon-arrow-right:before {
    font-size: 20px;
    color: #555555;
  }
  /deep/.el-pager li {
    width: 32px;
    height: 32px;
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    line-height: 32px;
    border-radius: 50% !important;
    background-color: transparent !important;
  }
  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background: linear-gradient(180deg, #1160cf 0%, #cd06bf 100%) !important;
    color: #ffffff !important;
    box-shadow: 0px -1px 5px #1160cf, 0px 1px 5px #cd06bf;
  }
  // // 修改滚动条样式 */
  // ::-webkit-scrollbar {
  //   width: 10px; /*高宽分别对应横竖滚动条的尺寸 */
  //   max-height: 10px;
  // }

  // /* 滚动槽的轨道 */
  // ::-webkit-scrollbar-track {
  //   border-radius: 30px;
  // }

  // /* 滚动条的小滑块 */
  // ::-webkit-scrollbar-thumb {
  //   border-radius: 30px;
  //   background: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
  // }
  // /deep/ .el-select__caret {
  //   transition: none;
  //   transform: rotate(0deg);
  //   margin-right: 10px;
  // }
  // /deep/ .el-icon-arrow-up::before {
  //   content: "";
  //   width: 39px;
  //   height: 39px;
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   border-left: 1px solid #ccd9f9;
  //   // background: url("~@/assets/triangle.png") no-repeat center center;
  //   // transform: rotate(90deg);
  //   background-size: 11px 17px;
  // }
}
/deep/ .progressBox1 .el-progress-bar__outer {
  background-color: #ebeef5;
  height: 20px !important;
}
</style>
